<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>后台管理系统</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
		<style>
			/* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        body {
            min-height: 100vh;
            background: #f8f9fa;
            font-family: system-ui, -apple-system, sans-serif;
        }

        /* 顶部导航栏 */
        .topbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            z-index: 1000;
        }

        .toggle-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #495057;
            margin-right: 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            margin-left: auto;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 12px;
        }

        /* 侧边栏 */
       /* 侧边栏 */
.sidebar {
    width: 64px;
    background: rgba(255, 255, 255, 0.98);
    height: calc(100vh - 60px);
    position: fixed;
    left: 0;
    top: 60px;
    transition: width 0.3s ease, box-shadow 0.3s ease; /* 添加动画效果 */
    z-index: 1000;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden; /* 防止内容溢出 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); /* 添加阴影效果 */
}

.sidebar.active {
    width: 240px;
}

.menu-item {
    position: relative;
    padding: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #495057;
    transition: all 0.3s;
}

.menu-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0.08) 50%, 
        rgba(0, 0, 0, 0) 100%);
    transition: all 0.3s;
}

.sidebar.active .menu-item:not(:last-child)::after {
    width: calc(100% - 32px);
    left: 16px;
    transform: none;
}

.menu-item i {
    font-size: 20px;
    margin-right: 14px;
    min-width: 24px;
}

.menu-item span {
    display: none;
    font-size: 14px;
}

.sidebar.active .menu-item span {
    display: inline;
}

.menu-item.active {
    color: #2c7be5;
    background: rgba(44, 123, 229, 0.08);
}

/* 新增选中状态的线条样式 */
.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #2c7be5;
    transition: all 0.3s;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: all 0.3s;
}


        /* 主内容区 */
        .content {
            margin-left: 64px;
            margin-top: 60px;
            padding: 24px;
            transition: margin-left 0.3s;
        }

        .sidebar.active + .content {
            margin-left: 240px;
        }

        /* 数据看板 */
     .dashboard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 调整列宽 */
    gap: 16px; /* 减小列间距 */
    margin-bottom: 24px;
}

.dashboard-card {
    background: #fff;
    border-radius: 8px; /* 减小圆角 */
    padding: 16px; /* 减小内边距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 减小阴影 */
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px; /* 减小间距 */
}

.card-header i {
    font-size: 18px; /* 减小图标大小 */
    margin-right: 8px; /* 减小间距 */
    color: #2c7be5;
}

.card-header h3 {
    font-size: 16px; /* 减小字体大小 */
    font-weight: 500;
    color: #495057;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 减小间距 */
}

.main-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-stat span {
    font-size: 12px; /* 减小字体大小 */
    color: #6c757d;
}

.stat-number {
    font-size: 18px; /* 减小字体大小 */
    font-weight: 600;
    color: #2c7be5;
}

.sub-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* 减小间距 */
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-label {
    font-size: 10px; /* 减小字体大小 */
    color: #6c757d;
}

.stat-value {
    font-size: 14px; /* 减小字体大小 */
    font-weight: 500;
    color: #495057;
}


        /* 数据表格 */
       
       /* 数据表格 */
.table-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.data-table th {
    background: #f8f9fa;
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    min-width: 100px;
    white-space: nowrap;
}

.data-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f3f5;
    min-width: 100px;
    white-space: nowrap;
}

.data-table tr:hover td {
    background: #f8f9fa;
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.page-item {
    width: 32px;
    height: 32px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

}

.page-item.active {
    background: #2c7be5;
    color: #fff;
    border-color: #2c7be5;
}

/* 搜索框 */
.search-box {
    position: relative;
    width: 200px;
}

.search-box input {
    width: 100%;
    padding: 8px 32px;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s;
}

.search-box input:focus {
    border-color: #2c7be5;
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1);
    outline: none;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
}


        /* 响应式设计 */
        @media (max-width: 768px) {
            .content {
                padding: 16px;
            }

            .data-table {
                display: block;
                overflow-x: auto;
            }
        }
/* 状态标签样式 */
/* 状态标签样式 */

/* 单元格

/* 单元格样式 */




        .btn-icon {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-icon.edit {
            color: #2c7be5;
        }

        .btn-icon.delete {
            color: #dc3545;
        }

        .page-item {
            width: 32px;
            height: 32px;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            background: #fff;
            cursor: pointer;
        }

        .page-item.active {
            background: #2c7be5;
            color: #fff;
            border-color: #2c7be5;
        }


        /* 模态窗口样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 300px;
            transform: translateY(-50px);
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .modal.open {
            opacity: 1;
        }

        .modal.open .modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h3 {
            font-size: 18px;
            font-weight: 500;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #495057;
        }

        .modal-body .form-group {
            margin-bottom: 12px;
        }

        .modal-body label {
            display: block;
            margin-bottom: 4px;
            font-size: 14px;
            color: #495057;
        }

        .modal-body input[type="text"],
        .modal-body select {
            width: 100%;
            padding: 8px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            font-size: 14px;
        }

        .modal-body .btn {
            width: 100%;
            padding: 8px;
            background: #2c7be5;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .modal-body .btn:hover {
            background: #2868c7;
        }

        /* 复选框样式 */
        .auth-checkbox {
            margin-right: 8px;
        }

        /* 批量删除按钮样式 */
        .btn-icon.delete {
            background: #dc3545;
            color: #fff;
            margin-right: 8px;
        }

        .btn-icon.delete:hover {
            background: #a71d2a;
        }
        /* 输入框组样式 */
.input-group {
    display: flex;
    align-items: center;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
/* 输入框样式 */
.form-group input[type="date"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="date"]:focus,
.form-group textarea:focus {
    border-color: #2c7be5;
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1);
    outline: none;
}
.input-group input[type="number"] {
    flex: 1;
    border: none;
    padding: 8px;
    font-size: 14px;

}

.input-group-addon {
    background-color: #f8f9fa;
    padding: 8px 12px;
    font-size: 14px;
    color: #6c757d;
    border-left: 1px solid #e9ecef;
}
/* 支付设置表单样式 */
.form-container {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-container h3 {
    font-size: 18px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.3s;
}

.form-group input[type="text"]:focus {
    border-color: #2c7be5;
    outline: none;
}

.form-group .btn {
    width: 100%;
    padding: 10px;
    background: #2c7be5;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.form-group .btn:hover {
    background: #2868c7;
}

/* 表单容器样式 */
.form-container {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    margin: 0 auto;
}

/* 表单组样式 */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
}

/* 输入框样式 */
.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    border-color: #2c7be5;
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1);
    outline: none;
}
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="number"]:focus,
.form-group textarea:focus {
    border-color: #2c7be5;
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1);
    outline: none;
}
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="password"]:focus,
.form-group textarea:focus {
    border-color: #2c7be5;
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1);
    outline: none;
}

/* 文本域样式 */
.form-group textarea {
    resize: vertical; /* 允许垂直调整大小 */
    min-height: 120px; /* 设置最小高度 */
}

/* 自定义选择框容器 */
.custom-select {
    position: relative;
    width: 100%;
}

/* 自定义选择框样式 */
.custom-select select {
    width: 100%;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    color: #495057;
    background-color: #fff;
    appearance: none; /* 隐藏默认箭头 */
    -webkit-appearance: none; /* Safari 和 Chrome */
    -moz-appearance: none; /* Firefox */
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.custom-select select:focus {
    border-color: #2c7be5;
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1);
    outline: none;
}

/* 自定义下拉箭头 */
.custom-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none; /* 防止箭头遮挡点击 */
    color: #6c757d;
    font-size: 12px;
}



/* 提交按钮样式 */
.btn {
    width: 100%;
    padding: 10px;
    background: #2c7be5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn:hover {
    background: #2868c7;
}
    /* 用户菜单样式 */
    .user-menu {
        position: fixed;
        top: 60px; /* 顶部导航栏的高度 */
        right: 0px; /* 与右侧的距离 */
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        width: 100px; /* 更窄的宽度 */
        z-index: 1001;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(-10px);
    }

    .user-menu.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .user-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .user-menu li {
        padding: 2px 5px; /* 更小的按钮 */
        cursor: pointer;
    }

    .user-menu li:hover {
        background: #f8f9fa;
    }

    .user-menu .btn {
        width: 100%;
        padding: 2px; /* 更小的按钮 */
        border-radius: 6px;
        background: #fff; /* 白色背景 */
        color: #000000; /* 蓝色文字 */
        border: 1px solid #ffffff; /* 浅灰色边框 */
        border-radius: 4px;
        font-size: 10px; /* 更小的字体 */
        cursor: pointer;
    }

    .user-menu .btn:hover {
        background: #f8f9fa; /* 悬停时的背景颜色 */
        color: #2868c7; /* 悬停时的文字颜色 */
    }
    .modal {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 渐入渐出动画 */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.menu-item span {
    display: none;
    font-size: 14px;
    transition: opacity 0.3s ease; /* 添加淡入淡出效果 */
}

.sidebar.active .menu-item span {
    display: inline;
    opacity: 1;
}
/* 添加在全局样式中 */
* {
    -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
    -webkit-touch-callout: none; /* 禁用iOS长按菜单 */
}

/* 强化选中控制 */
body, button, table, tr, td {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/* 针对Safari浏览器的额外优化 */
@media (max-width: 768px) {
    .data-table td, .data-table th {
        -webkit-user-select: none;
        user-select: none;
    }
}

    </style>
	</head>
	<body>
		<!-- 顶部栏 -->
		<div class="topbar">
			<button class="toggle-btn" onclick="toggleSidebar()">
				<i class="fas fa-bars"></i>
			</button>
			<div class="user-info" onclick="toggleUserMenu()">
				<img src="avatar.png" class="user-avatar" alt="用户头像">
				<span class="user-name">管理员</span>
			</div>
		</div>

		<!-- 用户菜单 -->
		<div id="userMenu" class="user-menu">
			<ul>
				<li>
					<button class="btn" onclick="showChangePasswordModal()">修改密码</button>
				</li>
				<li>
					<button class="btn" onclick="logout()">退出登录</button>
				</li>
				<!-- 可以在这里添加更多菜单项 -->
			</ul>
		</div>

		<!-- 修改密码模态窗口 -->
		<div id="changePasswordModal" class="modal" style="display: none;">
			<div class="modal-content">
				<div class="modal-header">
					<h3>修改密码</h3>
					<button class="close-btn" onclick="closeChangePasswordModal()">&times;</button>
				</div>
				<div class="modal-body">
					<form id="changePasswordForm">
						<div class="form-group">
							<label for="oldPassword">旧密码：</label>
							<input type="password" id="oldPassword" name="oldPassword" required>
						</div>
						<div class="form-group">
							<label for="newPassword">新密码：</label>
							<input type="password" id="newPassword" name="newPassword" required>
						</div>
						<div class="form-group">
							<label for="confirmPassword">确认新密码：</label>
							<input type="password" id="confirmPassword" name="confirmPassword" required>
						</div>
						<div class="form-group">
							<button type="button" class="btn" onclick="changePassword()">提交</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- 侧边栏 -->
		<nav class="sidebar" id="sidebar">
			<div class="menu-item active" onclick="switchTab('dashboard')">
				<i class="fas fa-home"></i>
				<span>数据看板</span>
			</div>
			<div class="menu-item" onclick="switchTab('authorization')">
				<i class="fas fa-users"></i>
				<span>授权管理</span>
			</div>
			<div class="menu-item" onclick="switchTab('kamiList')">
				<i class="fas fa-list-ul"></i>
				<span>卡密列表</span>
			</div>
			<div class="menu-item" onclick="switchTab('orderlist')">
				<i class="fas fa-file-alt" />
				</i>
				<span>订单列表</span>
			</div>
			<div class="menu-item" onclick="switchTab('pay')">
				<i class="fas fa-wallet" />
				</i>
				<span>支付设置</span>
			</div>
			
			<div class="menu-item" onclick="switchTab('upload')">
				<i class="fas fa-upload"></i>
				<span>更新设置</span>
			</div>
			<div class="menu-item" onclick="switchTab('price')">
				<i class="fas fa-dollar-sign" /></i>
				<span>价格设置</span>
			</div>
			<div class="menu-item" onclick="switchTab('cog')">
				<i class="fas fa-cog" /></i>
				<span>网站设置</span>
			</div>

		</nav>

		<!-- 主内容 -->
		<div class="content" id="content">
			<!-- 数据看板 -->
			<div class="dashboard-container" id="dashboard">
				<!-- 卡密统计 -->
				<div class="dashboard-card">
					<div class="card-header">
						<i class="fas fa-list-ul"></i>
						<h3>卡密统计</h3>
					</div>
					<div class="card-content">
						<div class="main-stat">
							<span>卡密总量</span>
							<div class="stat-number" id="kamiTotal">0</div>
						</div>
						<div class="sub-stats">
							<div class="stat-item">
								<span class="stat-label">未使用</span>
								<span class="stat-value" id="kamiUnused">0</span>
							</div>
							<div class="stat-item">
								<span class="stat-label">已使用</span>
								<span class="stat-value" id="kamiUsed">0</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 当前版本 -->
				<div class="dashboard-card">
					<div class="card-header">
						<i class="fas fa-code-branch"></i>
						<h3>当前版本</h3>
					</div>
					<div class="card-content">
						<!-- 版本号 -->
						<div class="main-stat">
							<span>版本号</span>
							<div class="stat-number" id="currentVersion">v1.0.0</div>
						</div>
						<!-- 更新类型 -->
						<div class="main-stat">
							<!-- 使用与版本号相同的 main-stat 布局 -->
							<span>更新类型</span>
							<div class="stat-number" id="updateType">非必更</div> <!-- 使用相同的 stat-number 样式 -->
						</div>
					</div>
				</div>

				<!-- 用户统计 -->
				<div class="dashboard-card">
					<div class="card-header">
						<i class="fas fa-users"></i>
						<h3>用户统计</h3>
					</div>
					<div class="card-content">
						<div class="main-stat">
							<span>授权用户</span>
							<div class="stat-number" id="userCount">0</div>
						</div>
					</div>
				</div>

				<!-- 订单统计 -->
				<div class="dashboard-card">
					<div class="card-header">
						<i class="fas fa-file-alt"></i>
						<h3>订单统计</h3>
					</div>
					<div class="card-content">
						<div class="main-stat">
							<span>订单总量</span>
							<div class="stat-number" id="orderTotal">0</div>
						</div>
						<div class="sub-stats">
							<div class="stat-item">
								<span class="stat-label">已支付</span>
								<span class="stat-value" id="orderPaid">0</span>
							</div>
							<div class="stat-item">
								<span class="stat-label">未支付</span>
								<span class="stat-value" id="orderUnpaid">0</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			
<!-- 在HTML的侧边栏部分已存在网站设置菜单项 -->
<!-- 在content div内添加以下内容 -->
<div class="table-container" id="cog" style="display: none;">
    <div class="form-container">
        <h3>网站设置</h3>
        <form id="siteSettingsForm">
            <div class="form-group">
                <label for="siteTitle">网站标题：</label>
                <input type="text" id="siteTitle" name="title" required>
            </div>
            <div class="form-group">
                <label for="siteAnnouncement">网站公告：</label>
                <textarea id="siteAnnouncement" name="announcement" rows="5" required></textarea>
            </div>
            <div class="form-group">
                <button type="button" class="btn" onclick="saveSiteSettings()">保存设置</button>
            </div>
        </form>
    </div>
</div>
<!-- 编辑授权模态窗口 -->
<div id="editAuthModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>编辑授权</h3>
            <button class="close-btn" onclick="closeEditAuthModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="editAuthForm">
                <div class="form-group">
                    <label for="editQq">机器人QQ：</label>
                    <input type="text" id="editQq" name="qq" required readonly>
                </div>
                <div class="form-group">
                    <label for="editLxqq">联系人QQ：</label>
                    <input type="text" id="editLxqq" name="lxqq" required>
                </div>
                <div class="form-group">
                    <label for="editType">授权类型（日期）：</label>
                    <input type="date" id="editType" name="type" required>
                </div>
                <div class="form-group">
                    <button type="button" class="btn" onclick="saveEditedAuth()">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

			<!-- 订单列表 -->
			<div class="table-container" id="orderlist" style="display: none;">
				<div class="table-header">
					<button class="btn-icon delete" onclick="deleteSelectedOrders()">
						<i class="fas fa-trash"></i>
					</button>
					<div class="search-box">
						<i class="fas fa-search"></i>
						<input type="text" id="searchOrderInput" placeholder="搜索订单号或联系人QQ..." onkeyup="searchOrders()">
					</div>
				</div>

				<table class="data-table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="selectAllOrders" onclick="toggleAllOrderCheckboxes()">
							</th>
							<th>订单号</th>
							<th>机器人QQ</th>
							<th>联系人QQ</th>
							<th>订单金额</th>
							<th>支付方式</th>
							<th>订单状态</th>
							<th>订单时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="orderTableBody">
						<!-- 动态加载数据 -->
					</tbody>
				</table>

				<div class="pagination" id="orderPagination">
					<!-- 分页按钮动态生成 -->
				</div>
			</div>


			<!-- 授权管理 -->
			<div class="table-container" id="authorization" style="display: none;">
				<div class="table-header">
					<button class="btn-icon delete" onclick="deleteSelectedAuths()">
						<i class="fas fa-trash"></i>
					</button>
					<button class="btn-icon add" onclick="showCreateModal()">
						<i class="fas fa-plus"></i>
					</button>
					<div class="search-box">
						<i class="fas fa-search"></i>
						<input type="text" id="searchInput" placeholder="搜索QQ或联系人..." onkeyup="searchAuth()">
					</div>
				</div>

				<table class="data-table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes()">
							</th>
							<th>QQ</th>
							<th>联系人</th>
							<th>类型</th>
							<th>授权时间</th>
							<th>到期时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="authTableBody">
						<!-- 动态加载数据 -->
					</tbody>
				</table>



				<div class="pagination" id="authPagination"></div>
			</div>

			<div class="table-container" id="kamiList" style="display: none;">
				<div class="table-header">
    <button class="btn-icon delete" onclick="deleteSelectedKami()">
        <i class="fas fa-trash"></i>
    </button>
    <button class="btn-icon copy" onclick="copySelectedKami()">
        <i class="fas fa-copy"></i>
    </button>
    <button class="btn-icon add" onclick="showCreateKamiModal()">
        <i class="fas fa-plus"></i>
    </button>
    <div class="search-box">
        <i class="fas fa-search"></i>
        <input type="text" id="searchKamiInput" placeholder="搜索卡密..." onkeyup="searchKami()">
    </div>
</div>


				<table class="data-table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="selectAllKami" onclick="toggleAllKamiCheckboxes()">
							</th>
							<th>卡密</th>
							<th>类型</th>
							<th>状态</th>
							<th>到期时间</th>
							<th>使用者QQ</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="kamiTableBody">
						<!-- 动态加载数据 -->
					</tbody>
				</table>

				<div class="pagination" id="kamiPagination">
					<!-- 分页按钮动态生成 -->
				</div>
			</div>

			<!-- 添加卡密模态窗口 -->
			<div id="addKamiModal" class="modal">
				<div class="modal-content">
					<div class="modal-header">
						<h3>添加卡密</h3>
						<button class="close-btn" onclick="closeKamiModal()">&times;</button>
					</div>
					<div class="modal-body">
						<form id="addKamiForm">
							<div class="form-group">
								<label for="addKamiType">添加类型：</label>
								<select id="addKamiType" name="type" onchange="toggleAddKamiForm()">
									<option value="batch">批量添加卡密</option>
									<option value="single">单个添加卡密</option>
								</select>
							</div>
							<div id="batchAddSection" style="display: block;">
								<div class="form-group">
									<label for="count">数量：</label>
									<div class="input-group">
										<input type="number" id="count" name="count" min="1" required>
										<span class="input-group-addon">个</span>
									</div>
								</div>
							</div>
							<div id="singleAddSection" style="display: none;">
								<div class="form-group">
									<label for="kami">卡密：</label>
									<input type="text" id="kami" name="kami" required>
								</div>
							</div>
							<div class="form-group">
								<label for="type">卡密类型：</label>
								<select id="type" name="type">
									<option value="1">月卡</option>
									<option value="2">年卡</option>
									<option value="3">永久卡</option>
								</select>
							</div>
							<div class="form-group">
								<button type="button" class="btn" onclick="addKami()">添加卡密</button>
							</div>
						</form>
					</div>
				</div>
			</div>
<!-- 价格设置 -->
<div class="table-container" id="price" style="display: none;">
    <div class="form-container">
        <h3>价格设置</h3>
        <form id="priceSettingsForm">
            <div class="form-group">
                <label for="monthlyPrice">月卡价格（元）：</label>
                <input type="number" id="monthlyPrice" name="monthlyPrice" required>
            </div>
            <div class="form-group">
                <label for="yearlyPrice">年卡价格（元）：</label>
                <input type="number" id="yearlyPrice" name="yearlyPrice" required>
            </div>
            <div class="form-group">
                <label for="lifetimePrice">永久卡价格（元）：</label>
                <input type="number" id="lifetimePrice" name="lifetimePrice" required>
            </div>
            <div class="form-group">
                <button type="button" class="btn" onclick="savePriceSettings()">保存设置</button>
            </div>
        </form>
    </div>
</div>
			<!-- 支付设置 -->
			<div class="table-container" id="pay" style="display: none;">
				<div class="form-container">
					<h3>支付设置</h3>
					<form id="paySettingsForm">
						<div class="form-group">
							<label for="apiurl">支付API</label>
							<input type="text" id="apiurl" name="apiurl" placeholder="请输入支付API" required>
						</div>
							<div class="form-group">
							<label for="pid">支付PID</label>
							<input type="text" id="pid" name="pid" placeholder="请输入支付PID" required>
						</div>
						<div class="form-group">
							<label for="key">支付KEY</label>
							<input type="text" id="key" name="key" placeholder="请输入支付KEY" required>
						</div>
					
						<div class="form-group">
							<button type="button" class="btn" onclick="submitPaySettings()">提交</button>
						</div>
					</form>
				</div>
			</div>



			<!-- 更新设置 -->
			<div class="table-container" id="upload" style="display: none;">
				<div class="form-container">
					<h3>更新设置</h3>
					<form id="updateSettingsForm">
						<!-- 更新版本 -->
						<div class="form-group">
							<label for="version">更新版本：</label>
							<input type="text" id="version" name="version" placeholder="请输入更新版本" required>
						</div>

						<!-- 下载链接 -->
						<div class="form-group">
							<label for="downloadUrl">下载链接：</label>
							<input type="text" id="downloadUrl" name="downloadUrl" placeholder="请输入下载链接" required>
						</div>

						<!-- 版本公告 -->
						<div class="form-group">
							<label for="updateNotice">版本公告：</label>
							<textarea id="updateNotice" name="updateNotice" placeholder="请输入版本公告（支持HTML）" required></textarea>
						</div>

						<!-- 更新类型 -->
						<div class="form-group">
							<label for="updateType">更新类型：</label>
							<div class="custom-select">
								<select id="updateType" name="updateType">
									<option value="1">必更</option>
									<option value="0">非必更</option>
								</select>
								<span class="custom-arrow">&#9660;</span> <!-- 下拉箭头 -->
							</div>
						</div>

						<!-- 提交按钮 -->
						<div class="form-group">
							<button type="button" class="btn" onclick="submitUpdateSettings()">提交</button>
						</div>
					</form>
				</div>
			</div>

			<!-- 添加授权模态窗口 -->
			<div id="addAuthModal" class="modal">
				<div class="modal-content">
					<div class="modal-header">
						<h3>添加授权</h3>
						<button class="close-btn" onclick="closeModal()">&times;</button>
					</div>
					<div class="modal-body">
						<form id="addAuthForm">
							<div class="form-group">
								<label for="qq">机器人QQ：</label>
								<input type="text" id="qq" name="qq" required>
							</div>
							<div class="form-group">
								<label for="lxqq">联系人QQ：</label>
								<input type="text" id="lxqq" name="lxqq" required>
							</div>
							<div class="form-group">
								<label for="type">授权类型：</label>
								<select id="type1" name="type">
									<option value="1">月卡</option>
									<option value="2">年卡</option>
									<option value="3">永久卡</option>
								</select>
							</div>
							<div class="form-group">
								<button type="button" class="btn" onclick="addAuth()">添加授权</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	


	

		<script>
			// 使用 JavaScript 发送请求到后端，验证登录状态
			// 显示编辑授权模态窗口
// 显示编辑授权模态窗口
function editAuth(qq) {
    const modal = document.getElementById('editAuthModal');
    modal.style.display = 'block';
    setTimeout(() => {
        modal.classList.add('open');
    }, 10);

    // 从后端获取当前授权信息
    fetch(`api/get_auth1.php?qq=${qq}`)
        .then(response => response.json())
        .then(data => {
            if (data.code == 200) {
                // 填充表单数据
                document.getElementById('editQq').value = data.data.qq;
                document.getElementById('editLxqq').value = data.data.lxqq;
                document.getElementById('editType').value = new Date(data.data.vip_time * 1000).toISOString().split('T')[0]; // 转换为 YYYY-MM-DD 格式
            } else {
                alert('获取授权信息失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('获取授权信息失败:', error);
            alert('获取授权信息失败，请稍后再试');
        });
}

// 关闭编辑授权模态窗口
function closeEditAuthModal() {
    const modal = document.getElementById('editAuthModal');
    modal.classList.remove('open');
    setTimeout(() => {
        modal.style.display = 'none';
    }, 300);
}

// 保存编辑的授权
async function saveEditedAuth() {
    const qq = document.getElementById('editQq').value;
    const lxqq = document.getElementById('editLxqq').value;
    const type = document.getElementById('editType').value;

    // 将日期转换为时间戳
    const timestamp = Math.floor(new Date(type).getTime() / 1000); // 转换为秒级时间戳

    try {
        const response = await fetch('api/edit_auth.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ qq: qq, lxqq: lxqq, type: timestamp })
        });

        const result = await response.json();
        if (result.code == 200) {
            alert('授权信息修改成功');
            closeEditAuthModal();
            fetchAuthList(currentPage); // 刷新当前页的授权列表
        } else {
            alert('修改失败: ' + result.message);
        }
    } catch (error) {
        console.error('修改失败:', error);
        alert('修改失败，请稍后再试');
    }
}

			
async function fetchPriceSettings() {
    try {
        const response = await fetch('api/get_price_settings.php');
        const data = await response.json();
        
        if (data.code === 200) {
            document.getElementById('monthlyPrice').value = data.data.monthly_price || 0;
            document.getElementById('yearlyPrice').value = data.data.yearly_price || 0;
            document.getElementById('lifetimePrice').value = data.data.lifetime_price || 0;
        }
    } catch (error) {
        console.error('获取价格设置失败:', error);
        alert('获取价格设置失败');
    }
}

async function savePriceSettings() {
    const formData = new FormData();
    formData.append('monthly', document.getElementById('monthlyPrice').value);
    formData.append('yearly', document.getElementById('yearlyPrice').value);
    formData.append('lifetime', document.getElementById('lifetimePrice').value);

    try {
        const response = await fetch('api/save_price_settings.php', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        if (result.code === 200) {
            alert('价格设置保存成功');
            fetchPriceSettings(); // 重新加载最新设置
        } else {
            alert('保存失败: ' + (result.message || '未知错误'));
        }
    } catch (error) {
        console.error('保存失败:', error);
        alert('保存失败，请检查网络连接');
    }
}

// 在初始化代码中添加
window.addEventListener('DOMContentLoaded', () => {
    fetchPriceSettings();
});;


			// 后端 API 示例（PHP）
			    // 显示或隐藏用户菜单
			    function toggleUserMenu() {
			        const userMenu = document.getElementById('userMenu');
			        if (userMenu.classList.contains('active')) {
			            userMenu.classList.remove('active');
			            setTimeout(() => {
			                userMenu.style.display = 'none';
			            }, 300); // 等待动画完成
			        } else {
			            userMenu.style.display = 'block';
			            setTimeout(() => {
			                userMenu.classList.add('active');
			            }, 10); // 确保元素已经可见
			        }
			    }
			
			  function showChangePasswordModal() {
    const modal = document.getElementById('changePasswordModal');
    if (!modal.classList.contains('open')) {
        modal.style.display = 'block'; // 先显示模态窗口
        setTimeout(() => {
            modal.classList.add('open'); // 再添加 open 类触发动画
        }, 10);
    }
}

			    // 关闭修改密码模态窗口
			    function closeChangePasswordModal() {
    const modal = document.getElementById('changePasswordModal');
    if (modal.classList.contains('open')) {
        modal.classList.remove('open'); // 先移除 open 类触发隐藏动画
        setTimeout(() => {
            modal.style.display = 'none'; // 动画完成后隐藏模态窗口
        }, 300); // 确保动画时间与 CSS 动画时间一致
    }
}
let isAnimating = false;

function closeChangePasswordModal() {
    const modal = document.getElementById('changePasswordModal');
    if (!isAnimating && modal.classList.contains('open')) {
        isAnimating = true;
        modal.classList.remove('open'); // 先移除 open 类触发隐藏动画
        setTimeout(() => {
            modal.style.display = 'none'; // 动画完成后隐藏模态窗口
            isAnimating = false;
            // 清空表单数据
            document.getElementById('oldPassword').value = '';
            document.getElementById('newPassword').value = '';
            document.getElementById('confirmPassword').value = '';
        }, 300); // 确保动画时间与 CSS 动画时间一致
    }
}


function showChangePasswordModal() {
    const modal = document.getElementById('changePasswordModal');
    if (!isAnimating && modal.style.display !== 'block') {
        isAnimating = true;
        modal.style.display = 'block'; // 先显示模态窗口
        setTimeout(() => {
            modal.classList.add('open'); // 再添加 open 类触发动画
            isAnimating = false;
        }, 10);
    }
}

// 在页面加载时获取网站设置
window.addEventListener('DOMContentLoaded', () => {
    fetchSiteSettings();
});

// 获取网站设置
async function fetchSiteSettings() {
    try {
        const response = await fetch('api/get_site_settings.php');
        const data = await response.json();
        
        if (data.code === 200) {
            document.getElementById('siteTitle').value = data.data.title || '默认标题';
            document.getElementById('siteAnnouncement').value = data.data.announcement || '';
        }
    } catch (error) {
        console.error('获取网站设置失败:', error);
        alert('获取网站设置失败，请检查控制台');
    }
}

// 保存网站设置
async function saveSiteSettings() {
    const formData = new FormData();
    formData.append('title', document.getElementById('siteTitle').value);
    formData.append('announcement', document.getElementById('siteAnnouncement').value);

    try {
        const response = await fetch('api/save_site_settings.php', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        if (result.code === 200) {
            alert('设置保存成功');
            location.reload(); // 刷新页面使新设置生效
        } else {
            alert('保存失败: ' + (result.message || '未知错误'));
        }
    } catch (error) {
        console.error('保存失败:', error);
        alert('保存失败，请检查网络连接');
    }
}
function closeChangePasswordModal() {
    const modal = document.getElementById('changePasswordModal');
    if (!isAnimating && modal.classList.contains('open')) {
        isAnimating = true;
        modal.classList.remove('open'); // 先移除 open 类触发隐藏动画
        setTimeout(() => {
            modal.style.display = 'none'; // 动画完成后隐藏模态窗口
            isAnimating = false;
        }, 300); // 确保动画时间与 CSS 动画时间一致
    }
}

			
    // 获取用户输入
    function changePassword() {
    // 获取用户输入
    const oldPassword = document.getElementById('oldPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    // 验证新密码是否一致
    if (newPassword !== confirmPassword) {
        alert('新密码和确认密码不一致！');
        return;
    }
// 在script部分添加以下代码
// 在script部分添加以下代码


    // 发送AJAX请求到后端
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'api/new_admin.php', true); // 假设后端PHP文件名为 change_password.php
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.status === 'success') {
                alert(response.message);
                closeChangePasswordModal(); // 关闭模态窗
                // 刷新页面
                window.location.reload();
            } else {
                alert(response.code);
            }
        }
    };

    // 构造POST数据
    const formData = `old_password=${encodeURIComponent(oldPassword)}&new_password=${encodeURIComponent(newPassword)}`;
    xhr.send(formData);
}

function closeChangePasswordModal() {
    document.getElementById('changePasswordModal').style.display = 'none';
    // 清空表单
    document.getElementById('oldPassword').value = '';
    document.getElementById('newPassword').value = '';
    document.getElementById('confirmPassword').value = '';
}



			// 初始化
			async function fetchPaySettings() {
			    try {
			        const response = await fetch('api/epay_st.php');
			        const data = await response.json();
			
			        // 填充默认值
			        document.getElementById('apiurl').value = data.data.apiurl || 'api/epay_st.php';
			        document.getElementById('key').value = data.data.key || 'data.key';
			        document.getElementById('pid').value = data.data.pid || 'data.pid';
			    } catch (error) {
			        console.error('获取支付设置失败:', error);
			        // 如果接口不可用，设置默认占位符内容
			        document.getElementById('apiurl').value = '无';
			        document.getElementById('key').value = '无';
			        document.getElementById('pid').value = '无';
			    }
			}
			// 获取默认更新内容并填充表单
			async function fetchUpdateSettings() {
			    try {
			        const response = await fetch('api/get_update_settings.php');
			        const data = await response.json();
			
			        if (data.code === 200) {
			            document.getElementById('version').value = data.data.version || '';
			            document.getElementById('downloadUrl').value = data.data.downloadUrl || '';
			            document.getElementById('updateNotice').value = data.data.updateNotice || '';
			            document.getElementById('updateType').value = data.data.updateType || '0';
			        } else {
			            console.error('获取更新设置失败:', data.msg);
			        }
			    } catch (error) {
			        console.error('获取更新设置失败:', error);
			    }
			}
			
			// 初始化
			window.addEventListener('DOMContentLoaded', () => {
			    fetchUpdateSettings(); // 加载更新设置默认值
			});
			// 提交更新设置
			async function submitUpdateSettings() {
			    const version = document.getElementById('version').value;
			    const downloadUrl = document.getElementById('downloadUrl').value;
			    const updateNotice = document.getElementById('updateNotice').value;
			    const updateType = document.getElementById('updateType').value;
			
			    const formData = new FormData();
			    formData.append('version', version);
			    formData.append('downloadUrl', downloadUrl);
			    formData.append('updateNotice', updateNotice);
			    formData.append('updateType', updateType);
			
			    try {
			        const response = await fetch('api/submit_update_settings.php', {
			            method: 'POST',
			            body: formData
			        });
			
			        const result = await response.json();
			        if (result.code === 200) {
			            alert('更新设置提交成功');
			        } else {
			            alert('更新设置提交失败: ' + result.msg);
			        }
			    } catch (error) {
			        console.error('提交更新设置失败:', error);
			        alert('提交更新设置失败，请稍后再试');
			    }
			}
			// 提交支付设置
			// 提交支付设置
			// 提交支付设置
			function submitPaySettings() {
			    const apiurl = document.getElementById('apiurl').value;
			    const pid = document.getElementById('pid').value;
			    const key = document.getElementById('key').value;
			
			    // 构建查询参数
			    const params = new URLSearchParams({ apiurl: apiurl, pid: pid, key: key }).toString();
			
			    // 发送GET请求
			    fetch(`/api/epay.php?${params}`)
			        .then(response => response.json())
			        .then(result => {
			            if (result.code === 200) {
			                alert('支付设置更新成功');
			            } else {
			                alert('支付设置更新失败: ' + result.msg);
			            }
			        })
			        .catch(error => {
			            console.error('提交支付设置失败:', error);
			            alert('提交支付设置失败，请稍后再试');
			        });
			}
			
			
			function logout() {
			    if (confirm('确定要退出登录吗？')) {
			        window.location.href = 'api/logout.php';
			    }
			}
			
			
			// 初始化
			window.addEventListener('DOMContentLoaded', () => {
			    fetchPaySettings(); // 加载支付设置默认值
			});
			
			    // 显示添加卡密模态窗口
			// 显示添加卡密模态窗口
			function showCreateKamiModal() {
			    const modal = document.getElementById('addKamiModal');
			    modal.style.display = 'block';
			    setTimeout(() => {
			        modal.classList.add('open');
			    }, 10);
			}
			
			// 关闭卡密模态窗口
			function closeKamiModal() {
			    const modal = document.getElementById('addKamiModal');
			    modal.classList.remove('open');
			    setTimeout(() => {
			        modal.style.display = 'none';
			    }, 300);
			}
			
			// 切换添加卡密表单
			function toggleAddKamiForm() {
			    const addKamiType = document.getElementById('addKamiType').value;
			    const batchAddSection = document.getElementById('batchAddSection');
			    const singleAddSection = document.getElementById('singleAddSection');
			
			    if (addKamiType === 'batch') {
			        batchAddSection.style.display = 'block';
			        singleAddSection.style.display = 'none';
			    } else if (addKamiType === 'single') {
			        batchAddSection.style.display = 'none';
			        singleAddSection.style.display = 'block';
			    }
			}
			
			// // 添加卡密
			async function addKami() {
			    const addKamiType = document.getElementById('addKamiType').value;
			    const type = document.getElementById('type').value;
			
			    let url;
			    if (addKamiType === 'batch') {
			        const count = document.getElementById('count').value;
			        url = `./api/add_kami.php?type=${type}&count=${count}`;
			    } else if (addKamiType === 'single') {
			        const kami = document.getElementById('kami').value;
			        url = `./api/addkami.php?type=${type}&kami=${kami}`;
			    }
			
			    try {
			        const response = await fetch(url, {
			            method: 'GET'
			        });
			
			        const result = await response.json();
			        if (result.code === '200') {
			            alert(addKamiType === 'batch' ? '批量添加卡密成功' : '单个添加卡密成功');
			            closeKamiModal();
			            fetchKamiList(currentPageKami); // 刷新当前页的卡密列表
			        } else {
			            alert(addKamiType === 'batch' ? '批量添加卡密失败: ' + result.msg : '单个添加卡密失败: ' + result.msg);
			        }
			    } catch (error) {
			        console.error('添加卡密失败:', error);
			        alert('添加卡密失败，请稍后再试');
			    }
			}
			
			// 全局变量
			let currentPageOrder = 1; // 当前页码
			const pageSizeOrder = 10; // 每页显示的数量
			
			// 渲染订单表格
			function renderOrderTable(data) {
			    const tbody = document.getElementById('orderTableBody');
			    tbody.innerHTML = data.map(item => `
			        <tr>
			            <td><input type="checkbox" class="order-checkbox" data-order="${item.out_trade_no}"></td>
			            <td>${item.out_trade_no}</td>
			            <td>${item.jqr}</td>
			            <td>${item.lxr}</td>
			            <td>${item.money}</td>
			            <td>${item.type}</td>
			            <td>${item.ty == '1' ? '已支付' : '未支付'}</td>
			            <td>${formatDateTimeo(item.time)}</td>
			            <td>
			                <button class="btn-icon edit" onclick="editOrder('${item.out_trade_no}')">
			                    <i class="fas fa-edit"></i>
			                </button>
			                <button class="btn-icon delete" onclick="deleteOrder('${item.out_trade_no}')">
			                    <i class="fas fa-trash"></i>
			                </button>
			            </td>
			        </tr>
			    `).join('');
			}
			
			// 获取订单列表
			async function fetchOrderList(page = 1) {
			    currentPageOrder = page;
			    try {
			        const response = await fetch('api/orderlist.php');
			        const data = await response.json();
			
			        if (data.code === 200) {
			            const totalItems = data.count;
			            const totalPages = Math.ceil(totalItems / pageSizeOrder);
			            const startIndex = (page - 1) * pageSizeOrder;
			            const endIndex = startIndex + pageSizeOrder;
			            const paginatedData = data.data.slice(startIndex, endIndex);
			
			            renderOrderTable(paginatedData);
			            renderOrderPagination(totalPages);
			        } else {
			            console.error('获取订单列表失败:', data.msg);
			            alert('获取订单列表失败: ' + data.msg);
			        }
			    } catch (error) {
			        console.error('获取订单列表失败:', error);
			        
			    }
			}
			
			// 渲染订单分页按钮
			function renderOrderPagination(totalPages) {
			    const paginationContainer = document.getElementById('orderPagination');
			    paginationContainer.innerHTML = '';
			
			    for (let i = 1; i <= totalPages; i++) {
			        const pageButton = document.createElement('button');
			        pageButton.className = `page-item ${i === currentPageOrder ? 'active' : ''}`;
			        pageButton.textContent = i;
			        pageButton.onclick = () => fetchOrderList(i);
			        paginationContainer.appendChild(pageButton);
			    }
			}
			
			// 全选/取消全选订单
			function toggleAllOrderCheckboxes() {
			    const selectAllCheckbox = document.getElementById('selectAllOrders');
			    const checkboxes = document.querySelectorAll('.order-checkbox');
			    checkboxes.forEach(checkbox => {
			        checkbox.checked = selectAllCheckbox.checked;
			    });
			}
			
			// 批量删除订单
			// 批量删除订单
			async function deleteSelectedOrders() {
			    const checkboxes = document.querySelectorAll('.order-checkbox:checked');
			    if (checkboxes.length === 0) {
			        alert('请先选择要删除的订单');
			        return;
			    }
			
			    if (!confirm('确定要删除所选订单吗？')) {
			        return;
			    }
			
			    const orderList = Array.from(checkboxes).map(checkbox => checkbox.getAttribute('data-order'));
			
			    try {
			        // 构建查询参数
			        const params = new URLSearchParams({ orderlist: orderList.join(',') });
			        const response = await fetch(`api/delete_order.php?${params.toString()}`);
			
			        const result = await response.json();
			        if (result.code === 200) {
			            alert(result.msg);
			            fetchOrderList(currentPageOrder); // 刷新当前页的订单列表
			        } else {
			            alert(result.error);
			        }
			    } catch (error) {
			        console.error('批量删除失败:', error);
			        alert('批量删除失败，请稍后再试');
			    }
			}
			
			// 单个删除订单
			async function deleteOrder(orderNo) {
			    if (!confirm('确定要删除该订单吗？')) {
			        return;
			    }
			
			    try {
			        // 构建查询参数
			        const params = new URLSearchParams({ orderlist: orderNo });
			        const response = await fetch(`api/delete_order.php?${params.toString()}`);
			
			        const result = await response.json();
			        if (result.code === 200) {
			            alert(result.msg);
			            fetchOrderList(currentPageOrder); // 刷新当前页的订单列表
			        } else {
			            alert(result.error);
			        }
			    } catch (error) {
			        console.error('删除失败:', error);
			        alert('删除失败，请稍后再试');
			    }
			}
			
			// 搜索订单（带防抖）
			let searchOrderTimer;
			function searchOrders() {
			    clearTimeout(searchOrderTimer);
			    searchOrderTimer = setTimeout(() => {
			        const searchTerm = document.getElementById('searchOrderInput').value.toLowerCase();
			        const rows = document.querySelectorAll('#orderTableBody tr');
			
			        rows.forEach(row => {
			            const text = row.textContent.toLowerCase();
			            row.style.display = text.includes(searchTerm) ? '' : 'none';
			        });
			    }, 300);
			}
			window.addEventListener('DOMContentLoaded', () => {
			    fetchOrderList(1);  // 加载第一页订单数据
			    fetchAuthList(1);   // 加载第一页授权管理数据
			    fetchKamiList(1);   // 加载第一页卡密数据
			});
			
			
			// 时间戳转换为指定格式
			function formatDateTimeo(timestamp, format) {
			    const date = new Date(timestamp / 1000 * 1000); // 将秒级时间戳转换为毫秒
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
			    const day = String(date.getDate()).padStart(2, '0');
			    const hours = String(date.getHours()).padStart(2, '0');
			    const minutes = String(date.getMinutes()).padStart(2, '0');
			    const seconds = String(date.getSeconds()).padStart(2, '0');
			
			    if (format === 'YYYYMMDDHHmmss') {
			        return `${year}${month}${day}${hours}${minutes}${seconds}`;
			    } else if (format === 'YYYY-MM-DD HH:mm:ss') {
			        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			    } else {
			        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			    }
			}
			
			// 初始化订单列表
			window.addEventListener('DOMContentLoaded', () => {
			    fetchOrderList(1); // 加载第一页订单数据
			});
			
			
			        // 全局变量
			        let currentPage = 1; // 当前页码
			        const pageSize = 10; // 每页显示的数量
			
			        // 显示添加授权模态窗口
			        function showCreateModal() {
			            const modal = document.getElementById('addAuthModal');
			            modal.style.display = 'block';
			            setTimeout(() => {
			                modal.classList.add('open');
			            }, 10);
			        }
			
			        // 关闭模态窗口
			        function closeModal() {
			            const modal = document.getElementById('addAuthModal');
			            modal.classList.remove('open');
			            setTimeout(() => {
			                modal.style.display = 'none';
			            }, 300);
			        }
			
			        // 全选/取消全选
			        function toggleAllCheckboxes() {
			            const selectAllCheckbox = document.getElementById('selectAll');
			            const checkboxes = document.querySelectorAll('.auth-checkbox');
			            checkboxes.forEach(checkbox => {
			                checkbox.checked = selectAllCheckbox.checked;
			            });
			        }
			
			        // 批量删除
			        async function deleteSelectedAuths() {
			            const checkboxes = document.querySelectorAll('.auth-checkbox:checked');
			            if (checkboxes.length === 0) {
			                alert('请先选择要删除的授权');
			                return;
			            }
			
			            if (!confirm('确定要删除所选授权吗？')) {
			                return;
			            }
			
			            const qqList = Array.from(checkboxes).map(checkbox => checkbox.getAttribute('data-qq'));
			
			            try {
			                const response = await fetch('api/delete_auth.php', {
			                    method: 'POST',
			                    headers: {
			                        'Content-Type': 'application/json'
			                    },
			                    body: JSON.stringify({ qqList: qqList })
			                });
			
			                const result = await response.json();
			                if (result.code === '200') {
			                    alert('删除成功');
			                    fetchAuthList(currentPage); // 刷新当前页的授权列表
			                } else {
			                    alert('删除失败: ' + result.message);
			                }
			            } catch (error) {
			                console.error('批量删除失败:', error);
			                alert('批量删除失败，请稍后再试');
			            }
			        }
			
			        // 单个删除
			        async function deleteAuth(qq) {
			            if (!confirm('确定要删除该授权吗？')) {
			                return;
			            }
			
			            try {
			                const response = await fetch('api/delete_auth.php', {
			                    method: 'POST',
			                    headers: {
			                        'Content-Type': 'application/json'
			                    },
			                    body: JSON.stringify({ qqList: [qq] })
			                });
			
			                const result = await response.json();
			                if (result.code === '200') {
			                    alert('删除成功');
			                    fetchAuthList(currentPage); // 刷新当前页的授权列表
			                } else {
			                    alert('删除失败: ' + result.message);
			                }
			            } catch (error) {
			                console.error('删除失败:', error);
			                alert('删除失败，请稍后再试');
			            }
			        }
			// 卡密列表相关变量
			let currentPageKami = 1; // 当前页码
			const pageSizeKami = 10; // 每页显示的数量
			
		async function fetchKamiList(page = 1) {
    currentPageKami = page;
    try {
        const response = await fetch('api/kamilist.php');
        const data = await response.json();

        if (data.code == '200') {
            // 将卡密分为未使用和已使用两部分
            const unusedKami = data.data.filter(item => item.zt === 0);
            const usedKami = data.data.filter(item => item.zt === 1);

            // 将未使用的卡密放在前面，已使用的卡密放在后面
            const sortedData = [...unusedKami, ...usedKami];

            const totalItems = sortedData.length;
            const totalPages = Math.ceil(totalItems / pageSizeKami);

            // 计算分页数据
            const startIndex = (page - 1) * pageSizeKami;
            const endIndex = startIndex + pageSizeKami;
            const paginatedData = sortedData.slice(startIndex, endIndex);

            renderKamiTable(paginatedData);
            renderKamiPagination(totalPages);
        } else {
            console.error('获取卡密列表失败:', data.msg);
            alert('获取卡密列表失败: ' + data.code);
        }
    } catch (error) {
        console.error('获取卡密列表失败:', error);
    }
}

function renderKamiTable(data) {
    const tbody = document.getElementById('kamiTableBody');
    tbody.innerHTML = data.map(item => `
        <tr data-kami="${item.kami}">
            <td><input type="checkbox" class="kami-checkbox" data-kami="${item.kami}"></td>
            <td>${item.kami}</td>
            <td>${kami(item.type)}</td>
            <td class="${item.zt === 0 ? 'status active' : 'status'}">${item.zt === 0 ? '未使用' : '已使用'}</td>
            <td>${item.vip_time ? formatDateTime(item.vip_time) : ''}</td>
            <td>${item.qq || '无'}</td>
            <td>
                <button class="btn-icon edit" onclick="editKami('${item.kami}')">
                    <i class="fas fa-edit"></i>
                </button>
                <button class="btn-icon delete" onclick="deleteKami('${item.kami}')">
                    <i class="fas fa-trash"></i>
                </button>
                ${item.zt === 0 ? `
                    <button class="btn-icon copy" onclick="copyKami('${item.kami}')">
                        <i class="fas fa-copy"></i>
                    </button>
                ` : ''}
            </td>
        </tr>
    `).join('');
}

function copySelectedKami() {
    const checkboxes = document.querySelectorAll('.kami-checkbox:checked');
    if (checkboxes.length === 0) {
        alert('请先选择要复制的卡密');
        return;
    }

    const kamiList = Array.from(checkboxes).map(checkbox => {
        const kami = checkbox.getAttribute('data-kami');
        const kamiStatus = document.querySelector(`tr[data-kami="${kami}"] .status`).textContent.trim();
        if (kamiStatus === '已使用') {
       
            return null;
        }
        return kami;
    }).filter(kami => kami !== null);

    if (kamiList.length === 0) {
        alert('没有可复制的卡密');
        return;
    }

    const input = document.createElement('textarea');
    input.value = kamiList.join('\n');
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    alert('卡密已复制到剪贴板');
}

function copyKami(kami) {
    const input = document.createElement('input');
    input.value = kami;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    alert('卡密已复制到剪贴板');
}

			
			function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    sidebar.classList.toggle('active');

    // 动态调整主内容区的 margin-left
    const content = document.getElementById('content');
    if (sidebar.classList.contains('active')) {
        content.style.marginLeft = '240px';
    } else {
        content.style.marginLeft = '64px';
    }
}

			
			// 获取卡密列表
		
			// 渲染卡密分页按钮
			function renderKamiPagination(totalPages) {
			    const paginationContainer = document.getElementById('kamiPagination');
			    paginationContainer.innerHTML = '';
			
			    for (let i = 1; i <= totalPages; i++) {
			        const pageButton = document.createElement('button');
			        pageButton.className = `page-item ${i === currentPageKami ? 'active' : ''}`;
			        pageButton.textContent = i;
			        pageButton.onclick = () => fetchKamiList(i);
			        paginationContainer.appendChild(pageButton);
			    }
			}
			
			// 全选/取消全选卡密
			function toggleAllKamiCheckboxes() {
			    const selectAllCheckbox = document.getElementById('selectAllKami');
			    const checkboxes = document.querySelectorAll('.kami-checkbox');
			    checkboxes.forEach(checkbox => {
			        checkbox.checked = selectAllCheckbox.checked;
			    });
			}
			
			// 批量删除卡密
			
			// 搜索卡密（带防抖）
			let searchKamiTimer;
			function searchKami() {
			    clearTimeout(searchKamiTimer);
			    searchKamiTimer = setTimeout(() => {
			        const searchTerm = document.getElementById('searchKamiInput').value.toLowerCase();
			        const rows = document.querySelectorAll('#kamiTableBody tr');
			
			        rows.forEach(row => {
			            const text = row.textContent.toLowerCase();
			            row.style.display = text.includes(searchTerm) ? '' : 'none';
			        });
			    }, 300);
			}
			
			// 初始化卡密列表
			window.addEventListener('DOMContentLoaded', () => {
			    fetchKamiList(1); // 加载第一页卡密数据
			});
			
			        // 渲染授权表格
			    function renderAuthTable(data) {
			    const tbody = document.getElementById('authTableBody');
			    tbody.innerHTML = data.map(item => `
			        <tr>
			            <td><input type="checkbox" class="auth-checkbox" data-qq="${item.qq}"></td>
			            <td>${item.qq}</td>
			            <td>${item.lxqq}</td>
			            <td>${getTypeLabel(item.ty)}</td>
			            <td>${formatDateTime(item.now_time)}</td>
			            <td>${formatDateTime(item.vip_time)}</td>
			            <td>
			                <button class="btn-icon edit" onclick="editAuth('${item.qq}')">
			                    <i class="fas fa-edit"></i>
			                </button>
			                <button class="btn-icon delete" onclick="deleteAuth('${item.qq}')">
			                    <i class="fas fa-trash"></i>
			                </button>
			            </td>
			        </tr>
			    `).join('');
			}
			function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const content = document.getElementById('content');

    if (sidebar.classList.contains('active')) {
        sidebar.classList.remove('active');
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                content.style.marginLeft = '64px';
            });
        });
    } else {
        sidebar.classList.add('active');
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                content.style.marginLeft = '240px';
            });
        });
    }
}

			        function formatDateTime(timestamp) {
			    const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
			    const day = String(date.getDate()).padStart(2, '0');
			    const hours = String(date.getHours()).padStart(2, '0');
			    const minutes = String(date.getMinutes()).padStart(2, '0');
			    const seconds = String(date.getSeconds()).padStart(2, '0');
			
			    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
			
			
			        // 获取授权列表
			        async function fetchAuthList(page = 1) {
			    currentPage = page;
			    try {
			        const response = await fetch('api/get_auth_list.php');
			        const data = await response.json();
			
			        if (data.code === '200') {
			            const totalItems = data.data.length;
			            const totalPages = Math.ceil(totalItems / pageSize);
			            const startIndex = (page - 1) * pageSize;
			            const endIndex = startIndex + pageSize;
			            const paginatedData = data.data.slice(startIndex, endIndex);
			
			            renderAuthTable(paginatedData);
			            renderAuthPagination(totalPages);
			        } else {
			            console.error('获取授权列表失败:', data.message);
			         
			        }
			    } catch (error) {
			        console.error('获取授权列表失败:', error);
			        
			    }
			}
			
			        // 渲染分页按钮
			       function renderAuthPagination(totalPages) {
			    const paginationContainer = document.getElementById('authPagination');
			    paginationContainer.innerHTML = '';
			
			    for (let i = 1; i <= totalPages; i++) {
			        const pageButton = document.createElement('button');
			        pageButton.className = `page-item ${i === currentPage ? 'active' : ''}`;
			        pageButton.textContent = i;
			        pageButton.onclick = () => fetchAuthList(i);
			        paginationContainer.appendChild(pageButton);
			    }
			}
			
			        // 添加授权
			        async function addAuth() {
			            const qq = document.getElementById('qq').value;
			            const lxqq = document.getElementById('lxqq').value;
			            const type = document.getElementById('type1').value;
			
			            try {
			                const response = await fetch(`./api/add_auth.php?qq=${qq}&lxqq=${lxqq}&type=${type}&ty=3`, {
			                    method: 'GET',
			                });
			
			                const result = await response.json();
			                if (result.code == '200') {
			                    alert('授权添加成功' + result.msg + type);
			                    closeModal();
			                    fetchAuthList(currentPage); // 刷新当前页的授权列表
			                } else {
			                    alert('授权添加失败: ' + result.msg);
			                }
			            } catch (error) {
			                console.error('添加授权失败:', error);
			                alert('添加授权失败，请稍后再试');
			            }
			        }
			
			        // 侧边栏切换
			        function toggleSidebar() {
			            const sidebar = document.getElementById('sidebar');
			            sidebar.classList.toggle('active');
			        }
			
			        // 切换选项卡
			function switchTab(tabId) {
    // 获取所有菜单项并移除 active 类
    document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('active');
    });
    // 给当前点击的菜单项添加 active 类
    event.target.closest('.menu-item').classList.add('active');

    // 获取所有内容区域
    const contentAreas = document.querySelectorAll('.table-container, .dashboard-container');

    // 隐藏所有内容区域之前先添加 fade-out 动画
    contentAreas.forEach(el => {
        el.classList.add('fade-out');
        el.style.display = 'none'; // 确保元素不可见
    });

    // 等待 fade-out 动画完成
    return new Promise((resolve) => {
        setTimeout(() => {
            contentAreas.forEach(el => {
                el.classList.remove('fade-out'); // 移除 fade-out 动画类
            });
            resolve();
        }, 300); // 等待 fade-out 动画完成（300ms）
    }).then(() => {
        // 显示目标内容区域
        const targetElement = document.getElementById(tabId);
        if (targetElement) {
            targetElement.style.display = tabId === 'dashboard' ? 'grid' : 'block'; // 数据看板使用 grid 布局
            targetElement.classList.add('fade-in'); // 添加 fade-in 动画

            // 确保动画开始后再显示内容
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    targetElement.style.opacity = 1; // 确保内容可见
                });
            });
        }

        // 如果切换到卡密列表，加载卡密数据
        if (tabId === 'kamiList') {
            fetchKamiList(1);
        }
    });
}



			
			function deleteKami(kami) {
			    if (!confirm('确定要删除该卡密吗？')) {
			        return;
			    }
			
			    const url = `api/delete_kami.php?kamiList=${encodeURIComponent(kami)}`;
			    fetch(url)
			        .then(response => response.json())
			        .then(result => {
			            if (result.code === '200') {
			                alert('删除成功');
			                fetchKamiList(currentPageKami); // 刷新当前页的卡密列表
			            } else {
			                alert('删除失败: ' + result.error);
			            }
			        })
			        .catch(error => {
			            console.error('删除失败:', error);
			            alert('删除失败，请稍后再试');
			        });
			}
			function deleteSelectedKami() {
			    const checkboxes = document.querySelectorAll('.kami-checkbox:checked');
			    if (checkboxes.length === 0) {
			        alert('请先选择要删除的卡密');
			        return;
			    }
			
			    if (!confirm('确定要删除所选卡密吗？')) {
			        return;
			    }
			
			    const kamiList = Array.from(checkboxes).map(checkbox => {
			        return encodeURIComponent(checkbox.getAttribute('data-kami'));
			    }).join(',');
			
			    fetch(`api/delete_kami.php?kamiList=${kamiList}`)
			        .then(response => response.json())
			        .then(result => {
			            if (result.code === '200') {
			                alert('删除成功');
			                fetchKamiList(currentPageKami);
			            } else {
			                alert('删除失败: ' + (result.error || result.msg));
			            }
			        })
			        .catch(error => {
			            console.error('批量删除失败:', error);
			            alert('批量删除失败，请检查控制台');
			        });
			}
			
			
			
			        // 获取首页数据
			        // 获取首页数据
			// 获取首页数据
			async function fetchDashboardData() {
			    try {
			        // 获取卡密、用户、订单统计数据
			        const response = await fetch('api/ui.php');
			        const data = await response.json();
			
			        // 更新卡密统计
			        document.getElementById('kamiTotal').textContent = data.kami.total || 0;
			        document.getElementById('kamiUnused').textContent = data.kami.zt0 || 0;
			        document.getElementById('kamiUsed').textContent = data.kami.zt1 || 0;
			
			        // 更新用户统计
			        document.getElementById('userCount').textContent = data.user || 0;
			
			        // 更新订单统计
			        document.getElementById('orderTotal').textContent = data.orders.total || 0;
			        document.getElementById('orderPaid').textContent = data.orders['1'] || 0;
			        document.getElementById('orderUnpaid').textContent = data.orders['2'] || 0;
			
			        // 获取当前版本信息
			        const versionResponse = await fetch('api/get_update_settings.php');
			        const versionData = await versionResponse.json();
			
			        if (versionData.code === 200) {
			            // 更新当前版本
			            document.getElementById('currentVersion').textContent = versionData.data.version || 'v1.0.0';
			            // 更新更新类型
			            document.getElementById('updateType').textContent = versionData.data.updateType === '1' ? '必更' : '非必更';
			        } else {
			            console.error('获取版本信息失败:', versionData.msg);
			        }
			    } catch (error) {
			        console.error('数据获取失败:', error);
			    }
			}
			
			
			        // 搜索功能（带防抖）
			        let searchTimer;
			        function searchAuth() {
			            clearTimeout(searchTimer);
			            searchTimer = setTimeout(() => {
			                const searchTerm = document.getElementById('searchInput').value.toLowerCase();
			                const rows = document.querySelectorAll('#authTableBody tr');
			
			                rows.forEach(row => {
			                    const text = row.textContent.toLowerCase();
			                    row.style.display = text.includes(searchTerm) ? '' : 'none';
			                });
			            }, 300);
			        }
			
			        // 工具函数
			        function formatTime(timestamp) {
			            return new Date(timestamp * 1000).toLocaleDateString();
			        }
			
			        function getTypeLabel(type) {
			            const types = {
			                '1': '卡密授权',
			                '2': '在线购买',
			                '3': '后台添加'
			            };
			            return types[type] || '未知类型';
			        }
			        
			        function kami(type) {
			            const types = {
			                '1': '月卡',
			                '2': '年卡',
			                '3': '永久卡'
			            };
			            return types[type] || '未知类型';
			        }
			
			        // 初始化
			        window.addEventListener('DOMContentLoaded', () => {
			            fetchDashboardData();
			            fetchAuthList(1); // 加载第一页数据
			            setInterval(fetchDashboardData, 30000); // 每30秒刷新数据
			        });
			
    // 身份验证检查
    async function checkAuth() {
        try {
            const response = await fetch('api/check-auth.php');
            const data = await response.json();
            if (!data.isAuthenticated) {
                window.location.href = 'login.html';
            }
        } catch (error) {
            console.error('认证检查失败:', error);
            window.location.href = 'login.html';
        }
    }

    // 在页面加载时先执行认证检查
    window.addEventListener('DOMContentLoaded', async () => {
        await checkAuth();  // 先进行认证检查
        // 原有的初始化代码
        fetchDashboardData();
        fetchAuthList(1);
        fetchOrderList(1);
        fetchKamiList(1);
        fetchPaySettings();
        fetchUpdateSettings();
        setInterval(fetchDashboardData, 30000);
    });

    // 以下是原有的其他JavaScript代码...
 
		</script>
	</body>
</html>